<template>
  <div class="ddd-container">
    <div class="d-loading">loading</div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.divideText()
  },
  methods: {
    divideText() {
      var textItems = document.querySelectorAll('.d-loading')
      var letters = textItems[0].textContent.split('')
      textItems[0].textContent = ''
      letters.forEach((letter, i) => {
        var span = document.createElement('span')
        span.textContent = letter
        span.style.animationDelay = `${i * 0.1}s`
        textItems[0].append(span)
      })
    }
  }
}
</script>

<style lang="scss">
@function float-text-3d($shadow-color: #bbb, $depth: 10, $floating: false){
  $shadow: ();

  @for $i from 1 through $depth {
    @if($floating == false and $i > $depth/2){
      $shadow-color: transparent;
    }
    $shadow:append($shadow, 0 ($i*1px) $shadow-color,comma);
  }

  @if ($floating == false){
    $shadow: append($shadow, 0 10px 10px rgba(0,0,0,0.4), comma);
  } @else {
    $shadow: append($shadow,0 50px 25px rgba(0,0,0,0.2), comma);
  }
  @return $shadow
}
  .ddd-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    margin-top: 20px;
    color: #fff;
    background: #b4e9fe;

    .d-loading {
      display: flex;
      font-size: 5em;
      font-family: "Baloo Bhaijaan", cursive;
      text-transform: uppercase;

      span {
        text-shadow: float-text-3d($floating: false);
        transform: translateY(20px);
        animation: bounce 0.3s ease infinite alternate;
      }
    }
  }

  @keyframes bounce {
    to {
      text-shadow: float-text-3d($floating: true);
      transform: translateY(-20px);
    }
  }
</style>
